From 58777d60844f3d5d4a485cac76758bac980dfaab Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Sat, 19 Jul 2014 11:11:44 +0200 Subject: [PATCH] Adwaita: insensitive backdrop state restyle Make backdrop insensitive state more similar to the focused windows one, mostly to make dark variant more usable and focused -> backdrop transition less distracting. --- gtk/resources/theme/Adwaita/_common.scss | 23 ++++---- gtk/resources/theme/Adwaita/_drawing.scss | 8 +-- .../theme/Adwaita/gtk-contained-dark.css | 53 ++++++++++--------- gtk/resources/theme/Adwaita/gtk-contained.css | 43 ++++++++------- 4 files changed, 65 insertions(+), 62 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 3c966c15f4..8994a69148 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -1496,8 +1496,8 @@ GtkSwitch { } &:insensitive { color: $backdrop_insensitive_color; - border-color: $backdrop_insensitive_color; - background-color: $backdrop_bg_color; + border-color: $backdrop_borders_color; + background-color: $insensitive_bg_color; } } } @@ -1521,9 +1521,6 @@ GtkSwitch { &:active{ border-color: $selected_bg_color; } &:insensitive { @include button(backdrop-insensitive); - @if $variant=='dark' { - border-color: $backdrop_insensitive_color; - } } } } @@ -1699,10 +1696,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { background-image: linear-gradient(to bottom, $backdrop_bg_color); box-shadow: none; } - &:backdrop:insensitive { @include button(backdrop-insensitive); - @if $variant=='dark' { - border-color: $backdrop_insensitive_color; - } + &:backdrop:insensitive { + @include button(backdrop-insensitive); } &:active { border: 1px solid if($variant=='light',darken($selected_borders_color,3%), @@ -1732,7 +1727,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { background-color: $selected_bg_color; box-shadow: $widget_edge; &:backdrop { - border-color: $selected_bg_color; + border-color: if($variant=='light', $selected_bg_color, + $selected_borders_color); background-color: $selected_bg_color; box-shadow: none; } @@ -1748,8 +1744,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { box-shadow: none; } &:backdrop:insensitive, .hilight:backdrop:insensitive { - border-color: $backdrop_insensitive_color; - background-color: $backdrop_bg_color; + border-color: $backdrop_borders_color; + background-color: $insensitive_bg_color; } //OSD troughs .osd & { @@ -1849,7 +1845,8 @@ GtkProgressBar { } // box-shadow: inset 1px 1px transparentize($borders_edge,0.8); &:backdrop { - border-color: $selected_bg_color; + border-color: if($variant=='light', $selected_bg_color, + $selected_borders_color); background-color: $selected_bg_color; box-shadow: none; } diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index f0f090eef6..3710b4c99e 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -77,12 +77,14 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on } @if $t==backdrop { color: $backdrop_fg_color; + border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, $backdrop_base_color); @include _shadows($_blank_inner_shadows, $_blank_edge); } @if $t==backdrop-insensitive { color: $backdrop_insensitive_color; - background-image: linear-gradient(to bottom, $backdrop_bg_color); + border-color: $backdrop_borders_color; + background-image: linear-gradient(to bottom, $insensitive_bg_color); @include _shadows($_blank_inner_shadows, $_blank_edge); } } @@ -244,7 +246,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; - background-image: linear-gradient(to bottom, $backdrop_bg_color); + background-image: linear-gradient(to bottom, $insensitive_bg_color); box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize(white,1); } @@ -256,7 +258,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, - mix($backdrop_borders_color,$backdrop_bg_color, 8%)); + mix($backdrop_borders_color,$insensitive_bg_color, 8%)); box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize(white,1); } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 5928ac0191..5c3be783e2 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -183,6 +183,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); color: #c9cbc9; + border-color: #1e2222; background-image: linear-gradient(to bottom, #2c2c2c); box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } .entry:backdrop:insensitive { @@ -191,7 +192,8 @@ border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); color: #454c4c; - background-image: linear-gradient(to bottom, #393f3f); + border-color: #1e2222; + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } .entry:selected, .entry:backdrop:selected { background-color: #215d9c; @@ -309,13 +311,13 @@ border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:backdrop:insensitive:active { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #363c3c); + background-image: linear-gradient(to bottom, #303434); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:insensitive { border-style: solid; @@ -421,7 +423,7 @@ border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.suggested-action:insensitive { border-style: solid; @@ -468,7 +470,7 @@ border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.destructive-action:insensitive { border-style: solid; @@ -566,13 +568,13 @@ border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #363c3c); + background-image: linear-gradient(to bottom, #303434); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat { @@ -786,7 +788,7 @@ GtkColorButton.button { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { border-radius: 0; } @@ -968,7 +970,7 @@ GtkComboBox { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .titlebar.selection-mode .button.suggested-action, .header-bar.selection-mode .button.suggested-action { @@ -1026,7 +1028,7 @@ GtkComboBox { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #0f2b48; } .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop, @@ -1587,8 +1589,8 @@ GtkSwitch { box-shadow: none; } GtkSwitch.trough:backdrop:insensitive { color: #454c4c; - border-color: #454c4c; - background-color: #393f3f; } + border-color: #1e2222; + background-color: #323636; } GtkSwitch.slider { border-radius: 3px; border-style: solid; @@ -1633,9 +1635,8 @@ GtkSwitch { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - border-color: #454c4c; } + background-image: linear-gradient(to bottom, #323636); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************************* * Check and Radio items * @@ -2022,9 +2023,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - border-color: #454c4c; } + background-image: linear-gradient(to bottom, #323636); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .scale.slider:active, .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active { @@ -2063,7 +2063,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { .scale.trough.highlight:backdrop, .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop { - border-color: #215d9c; + border-color: #0f2b48; background-color: #215d9c; box-shadow: none; } .scale.trough:insensitive, .scale.trough.hilight:insensitive, @@ -2085,8 +2085,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { - border-color: #454c4c; - background-color: #393f3f; } + border-color: #1e2222; + background-color: #323636; } .osd .scale.trough, .osd .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { @@ -2355,7 +2355,7 @@ GtkProgressBar { .progressbar.vertical.bottom { box-shadow: none; } .progressbar:backdrop { - border-color: #215d9c; + border-color: #0f2b48; background-color: #215d9c; box-shadow: none; } .progressbar.osd { @@ -2407,6 +2407,7 @@ GtkLevelBar.vertical { border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); color: #c9cbc9; + border-color: #1e2222; background-image: linear-gradient(to bottom, #2c2c2c); box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } .level-bar.fill-block { @@ -2620,7 +2621,7 @@ GtkCalendar { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action { border-style: solid; @@ -2659,7 +2660,7 @@ GtkCalendar { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive { border-style: solid; @@ -2706,7 +2707,7 @@ GtkCalendar { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive { border-style: solid; @@ -2855,7 +2856,7 @@ GtkInfoBar { border-style: solid; color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************ diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 942ff056f2..b1004c9757 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -183,6 +183,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); color: #54595a; + border-color: #a8a8a8; background-image: linear-gradient(to bottom, #fcfcfc); box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } .entry:backdrop:insensitive { @@ -191,7 +192,8 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); color: #c7c7c7; - background-image: linear-gradient(to bottom, #ededed); + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } .entry:selected, .entry:backdrop:selected { background-color: #4a90d9; @@ -301,13 +303,13 @@ border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:backdrop:insensitive:active { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #e7e7e7); + background-image: linear-gradient(to bottom, #ededed); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button:insensitive { border-style: solid; @@ -413,7 +415,7 @@ border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.suggested-action:insensitive { border-style: solid; @@ -460,7 +462,7 @@ border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .button.destructive-action:insensitive { border-style: solid; @@ -558,13 +560,13 @@ border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #e7e7e7); + background-image: linear-gradient(to bottom, #ededed); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .inline-toolbar.toolbar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton > .button.flat { @@ -778,7 +780,7 @@ GtkColorButton.button { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { border-radius: 0; } @@ -960,7 +962,7 @@ GtkComboBox { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .titlebar.selection-mode .button.suggested-action, .header-bar.selection-mode .button.suggested-action { @@ -1018,7 +1020,7 @@ GtkComboBox { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); border-color: #184472; } .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop, @@ -1581,8 +1583,8 @@ GtkSwitch { box-shadow: none; } GtkSwitch.trough:backdrop:insensitive { color: #c7c7c7; - border-color: #c7c7c7; - background-color: #ededed; } + border-color: #a8a8a8; + background-color: #f4f4f4; } GtkSwitch.slider { border-radius: 3px; border-style: solid; @@ -1627,7 +1629,7 @@ GtkSwitch { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************************* @@ -2015,7 +2017,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .scale.slider:active, .scale.scale-has-marks-above.scale-has-marks-below.slider:active, @@ -2077,8 +2079,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { - border-color: #c7c7c7; - background-color: #ededed; } + border-color: #a8a8a8; + background-color: #f4f4f4; } .osd .scale.trough, .osd .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { @@ -2399,6 +2401,7 @@ GtkLevelBar.vertical { border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); color: #54595a; + border-color: #a8a8a8; background-image: linear-gradient(to bottom, #fcfcfc); box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } .level-bar.fill-block { @@ -2613,7 +2616,7 @@ GtkCalendar { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action { border-style: solid; @@ -2652,7 +2655,7 @@ GtkCalendar { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive { border-style: solid; @@ -2699,7 +2702,7 @@ GtkCalendar { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive { border-style: solid; @@ -2848,7 +2851,7 @@ GtkInfoBar { border-style: solid; color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } /************ -- 2.30.2